import React, { useState, useEffect } from "react";
import "../../assets/css/kehu.css";
import {
  Input,
  Button,
  Checkbox,
  ConfigProvider,
  Table,
  Form,
  Modal,
  Col,
  Row,
  Select
} from "antd";
import { UpOutlined, DownOutlined } from "@ant-design/icons";
import axios from "axios";
export default function Phone() {
  let [show, setShow] = useState(true);
  let [khlist, setKhlist] = useState([]);
  let [ctlist,setCtlist]=useState({})
  let phone=[
    {value:'中国+86',label:'中国+86'},
    {value:'香港+26',label:'香港+26'}
  ]
  let zqList = [
    {
      label: "有未开始的租期",
      value: "1",
    },
    {
      label: "租期进行中",
      value: "2",
    },
    {
      label: "有已结来的租期",
      value: "3",
    },
  ];
  useEffect(() => {
    getKhlist();
  }, []);

  let [glyopen,setGlyopen]=useState(false)
  const columns = [
    {
      title: "客户名称",
      align:"center",
    
      render: (_) => (
       <span  style={{color:'#8479e3'}}
       onClick={()=>{
         console.log(_.id);
         
       }}
       
       >{_.name}</span>
    
   ),
    },
    {
      title: "有未开始的租期",
      dataIndex: "start",
      key: "start",
       align:"center"
    },
    {
      title: "租期进行中",
      dataIndex: "doing",
      key: "doing",
       align:"center"
    },
    {
      title: "有已结束的租期",
      dataIndex: "end",
      key: "end",
       align:"center"
    },

    {
      title: "联系人",
      dataIndex: "telname",
      key: "telname",
       align:"center"
    },
    {
      title: "联系人手机号",
      dataIndex: "phone",
      key: "phone",
       align:"center"
    },
    {
      title: "联系人邮箱",
      dataIndex: "email",
      key: "email",
       align:"center"
    },
    {
      title: "联系人职务",
      dataIndex: "teljob",
      key: "teljon",
       align:"center"
    },
    {
      title: "操作",
      // dataIndex: "设置管理员",
      // key: "设置管理员",
       align:"center",

       render: (_,row) => (
          <span  style={{color:'#8479e3'}}
          onClick={()=>{
            console.log(_.id);
            setCtlist(row)
           
            setGlyopen(true)
            setTelzqstyle(ctlist.glystyle)
            setZqname(ctlist.admin)
            setGlyid(ctlist.adminID)
            setGlyemail(ctlist.adminemail)
            setGlytel(ctlist.admintel)
          }}
          
          >设置联系人</span>
       
      ),
    }
  ];
  
  const getKhlist = () => {
    axios.get("/api/getKhList").then((res) => {
      setKhlist([...res.data]);
    });
  };

//

let [telzqstyle,setTelzqstyle]=useState('')
let[zqname,setZqname]=useState('')
let [glyid,setGlyid]=useState('')
let[glyemail,setGlyemail]=useState('')
let [glytel,setGlytel]=useState('')
const updatagly=(id)=>{
  axios.post('/api/updatagly',{
    params:{
      id,
      admin:zqname,
      adminID:glyid,
      adminemail:glyemail,
      admintel:glytel,
      glystyle:telzqstyle
     

    }
  })
}

  return (
    <>
      <ConfigProvider
        theme={{
          token: {
            colorPrimary: "#8479e3",
            colorLinkHover: "#8479e3",
          },
          components: {
            Button: {},
          },
        }}
      >
        <div className="kh-box">
          <div className="kh-btn">
               <p>签约联系人</p>
          </div>
          <div className="kh-search-box">
            <input type="text" placeholder="请输入客户名称" />
            
              <div className={show? 'khqysx':'slsx'}>
                <div>
                  <span className="text">租期状态</span>
                  <div>
                    <Checkbox.Group
                      options={zqList}
                      onChange={(e) => {
                        console.log(e);
                      }}
                    />
                  </div>
                </div>
              <div className="qy-tel">
              <span className="text">联系人姓名或手机号</span>
              <Input></Input>
              </div>
               
              </div>
          
            <div
              className="sxzk"
              onClick={() => {
                setShow(!show);
              }}
            >
              <div>
                {show ? <UpOutlined /> : <DownOutlined />}
                收起筛选
              </div>
            </div>
            <div>
              <Button className="isbtn btn4">查询</Button>
              <Button className="btn4" disabled>
                重置
              </Button>
            </div>
          </div>
          <div className="kh-table">
            <Table
              scroll={{
                scrollToFirstRowOnChange: true,
                y: 300,
              }}
              columns={columns}
              dataSource={khlist}
              align="center"
            ></Table>
          </div>
        </div>
        <Modal open={glyopen}  width={480} title="设置租期管理员"
        onOk={() => { setGlyopen(false);

          updatagly(ctlist.id)
          console.log(ctlist.id);
          
         }}
   
        cancelText="取消"
        okText="确认"
        maskClosable
        onCancel={() => {
          setGlyopen(false);
        }}
       >
<div className="kh-table1">
        <Form layout="vertical" labelCol >
              <div className="form-new">
            
                <Row>
                  <Col span={12}>
                    <Form.Item
                      label="管理员姓名"
                      className="from-title"
                      name="khlx"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Input
                        placeholder="请输入"
                        style={{ width:200 }}
                        value={zqname}
                        onChange={(e) => {
                       
                          setZqname(e.target.value);
                        (e)
                        }}
                        
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                        <Form.Item
                           className="from-title"
                          label="联系人手机号"
                          name="lxrsjh"
                          rules={[
                            {
                              required: true,
                            },
                    
                          ]}
                         
                        >
                          <Row>
                          <Col span={10}>
                          <Select
                           defaultValue="中国+86"
                            className="phonestyle"
                            style={{ width: 80 }}
                            value={telzqstyle} onChange={(e)=>{setTelzqstyle(e.target.value)}}
                            options={phone}
                          />
                          </Col>
                          <Col span={14}>
                        <Input placeholder='请输入'  style={{ width: 110 }} value={glytel} onChange={(e)=>{setGlytel(e.target.value)}}  />
                        </Col>
                          </Row>
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                    <Form.Item
                      label="联系人邮箱"
                      className="from-title"
                      name="lxryx"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Input
                        placeholder="请输入"
                        style={{ width:200 }}
                        value={glyemail}
                        onChange={(e) => {
                       
                          setGlyemail(e.target.value);
                        (e)
                        }}
                     
                      />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                      label="证件号"
                      className="from-title"
                      name="zjh"
                      rules={[
                        {
                          required: true,
                        },
                
                      ]}
                    >
                      <Input
                        placeholder="请输入"
                        style={{ width:200 }}
                        value={glyid}
                        onChange={(e) => {
                       
                          setGlyid(e);
                        (e)
                        }}
                        
                      />
                    </Form.Item>
                  </Col>
                   
                </Row>
                 </div>
             
             
            </Form>
        </div>
       </Modal>
      </ConfigProvider>
    </>
  );
}
